import { PureComponent } from "react";
import {connect} from 'react-redux'
import { addNum } from "../store/features/counter";

class About extends PureComponent
{
    addNum(num)
    {
        console.log(this.props);
        this.props.addNum(num);
    }
    
    render()
    {
        const { counter } = this.props;
        const { banners } = this.props;
        return (
            <div>
                <div>
                    <h2>About</h2>
                    <div>counter:{counter}</div>
                    <button onClick={e=>this.addNum(1)}>+1</button>
                    <button onClick={e=>this.addNum(5)}>+5</button>
                    <button onClick={e => this.addNum(10)}>+10</button>
                    <div>
                        <h2>轮播图：</h2>
                        {banners.map(item => {
                         return (
                            <li key={item.title}>
                                {item?.title}
                            </li>
                        )
                    })}
                    </div>
                </div>
           </div>
       )
    }
}

const mapDispatchtoProps = (dispatch) => {
    return {
        addNum: (num) => {
            dispatch(addNum(num));
        }
    }
}

const mapStatetoProps = (state) => {
    console.log(state.counter);
    return {
        counter: state.counter.counter,
        banners:state.home.banners
    }
}

export default connect(mapStatetoProps,mapDispatchtoProps)(About);